<template>
    <div class="app-container">

        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="50px">
            <el-form-item label="网关" prop="gatewayId">
                <gateway-select2 @changeGateway="changeGateway"/>
            </el-form-item>
        </el-form>

        <el-row :gutter="32" v-if="dataList.length>0">
            <el-col :xs="24" :sm="24" :lg="12" :key="item.id" v-for="(item, index) in dataList">
                <div class="chart-wrapper">
                    <line-chart :title="item.title" :chart-data="item.chartData" :xAxisData="item.echartsX"/>
                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script>
import { list } from '@/api/biz/sensorHistoryData'

import gatewaySelect2 from '../../common/gatewaySelect2'
import LineChart from '@/views/common/chart/LineChart'

export default {
    name: 'Realtime',
    components: {
        gatewaySelect2,
        LineChart
    },
    data() {
        return {
            showSearch: true,
            queryParams: {
                gatewayId: null,
                sensorId: null,
                timeIntervalId: 1,
                beginTime: '',
                endTime: ''
            },
            gatewayMapping: {},
            gatewayList: [],
            echartsX: [],
            echartsDataList: [],
            echartsLegendList: [],
            curveChart: null,
            timer: null,

            dataList: []
        }
    },
    created() {
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
    mounted() {
        // let _this = this
        // window.addEventListener("resize", function () {
        //     if (_this.curveChart == null) {
        //         _this.curveChart = _this.$echarts.init(document.getElementById('curve-chart'))
        //     }
        //     _this.curveChart.resize()
        // })
        this.intervalGetData()
    },
    methods: {

        // 接收子组件传递的消息
        changeGateway(obj) {
            console.log(obj)
            this.gatewayList = obj.gatewayListOption
            this.queryParams.gatewayId = obj.gatewayId
            this.getSensorHistoryMethod()
        },

        intervalGetData() {
            // 每隔3秒执行一次countTime方法
            // 1000 * 60 * 5
            if (this.timer) {
                clearInterval(this.timer)
            } else {
                this.timer = setInterval(this.getSensorHistoryMethod, 1000 * 60 * 5)
            }
        },
        getSensorHistoryMethod() {

            list(this.queryParams).then(response => {

                // console.log('响应...', response)

                this.dataList = []

                let data = response.data
                let length = data.length

                if (length > 0) {

                    console.log('length的长度', length)

                    for (let i = 0; i < length; i++) {
                        let mill = Date.now() + i
                        let sensorName = data[i]['sensorName']
                        let chartData = [
                            {
                                name: sensorName,
                                data: data[i]['data']
                            }
                        ]
                        let echartsX = data[i]['echartsX']
                        if (echartsX.length > 0) {
                            let obj = {
                                id: mill,
                                title: sensorName,
                                echartsX: echartsX,
                                chartData: chartData,
                                show: true
                            }
                            this.dataList.push(obj)
                        }
                    }
                    console.log('结果', this.dataList)
                }
                if (this.dataList.length === 0) {
                    let mill = Date.now()
                    let item = {
                        id: mill,
                        title: '模拟数据',
                        echartsX: [
                            '2020-10-01 10:00:00',
                            '2020-10-01 10:15:00',
                            '2020-10-01 10:30:00',
                            '2020-10-01 10:45:00',
                            '2020-10-01 11:00:00',
                            '2020-10-01 11:15:00',
                            '2020-10-01 11:30:00',
                            '2020-10-01 11:45:00',
                            '2020-10-01 12:00:00',
                            '2020-10-01 12:15:00'
                        ],
                        chartData: [
                            {
                                name: '模拟数据',
                                data: [
                                    5, 7, 9, 8, 11, 15, 16, 4, 20, 13
                                ]
                            }
                        ]
                    }
                    this.dataList.push(item)
                }
            })
        },
        drawLine() {
            // 基于准备好的dom，初始化echarts实例
            let curveChart = this.$echarts.init(document.getElementById('curve-chart'))
            this.curveChart = curveChart
            // 绘制图表
            let option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: this.echartsLegendList
                },
                grid: {
                    left: '8%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        // x轴点与点之间的距离,隔几个
                        //interval: 5,
                        // 倾斜
                        rotate: 50
                    },
                    data: this.echartsX
                },
                yAxis: {
                    type: 'value'
                },
                series: this.echartsDataList
            }
            curveChart.setOption(option, true)
        }
    }
}
</script>

<style scoped>

</style>
